<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%	
	//获取项目名
	String path = request.getContextPath();
	//获取tomcat 协议+地址+端口号+ 获取项目名
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	//out.println(basePath);
%>
<!doctype html>
<html>
<head>
<title>ZZG-用户登入</title>

<link href="<%=basePath %>css/login.css" rel='stylesheet'
	type='text/css' media="all" />

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Login And Registration Form Widget Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='//fonts.googleapis.com/css?family=Poiret+One'
	rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'
	type='text/css'>

<script src="<%=basePath %>jquery-3.5.1.js"></script>
<script
	src="<%=basePath %>bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet"
	href="<%=basePath %>bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="<%=basePath %>css/index.css">
<!-- 图标 -->
<link rel="stylesheet"
	href="<%=basePath %>bootstrap/bootstrap-3.3.7-dist/icomoon/style.css">
</head>
<body id="body">

	<div>
		<div class="header1">
			<h1>用户登录</h1>
		</div>

		<div class="content1" id="login-frame">
			<span>${msg }</span>
			<form id="login" action="<%=basePath %>userServlet" method="post">
				<input name="mark" value="checkCode" type="hidden"> <input
					id="userName" type="text" name="userName" value="用户名"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '用户名';}"> <input
					id="psw" type="text" name="psw" value="密码"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '密码';}"> <input
					id="userPhoneNumber" type="text" name="userPhoneNumber"
					value="手机号码" onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '手机号码';}"> <input
					id="code" type="text" name="code" value="验证码"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = '验证码';}">

				<div class="button-row">
					<input id="sub" class="sign-in" value="登录"> <input
						id="getCode" type="button" class="reset" value="获取验证码">
					<div class="clear"></div>
				</div>
				<p>
					<a href="#" style="color: red; font-size: 12px; margin-left: 20px;">${mes}</a>
				</p>
			</form>
		</div>
	</div>

	<div class="footer">
		<p>Copyright © 2020 | Design by ZZG_干干
	</div>

	<script type="text/javascript">

/*
 * ************************用户名、密码、手机号码为空检查；手机号码是否合法检查*****************************
 */

 
$("#sub").click(function(){
	var userName = $("#userName").val();
	var userPhoneNumber = $("#userPhoneNumber").val();
	var psw = $("#psw").val();
	var code = $("#code").val();
	
	
	/* 用户名不能为空 */
	if(userName=="用户名"){
		document.getElementById("userName").value ="用户名不能为空";
		$("#userName").css("color","red");
		return;
	}
	
	/* 密码不能为空 */
	if(psw=="密码"){
		document.getElementById("psw").value ="密码不能为空";
		$("#psw").css("color","red");
		return;
	}
	
	/* 手机号码不能为空 */
	if(userPhoneNumber=="手机号码"){
		document.getElementById("userPhoneNumber").value ="手机号码不能为空";
		$("#userPhoneNumber").css("color","red");
		return;
	}
	
	/* 正则表达式判断手机号码是否有误 */
	if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(userPhoneNumber))){ 
		document.getElementById("userPhoneNumber").value ="手机号码有误!";
		$("#userPhoneNumber").css("color","red");
		return;
    } 
	
	/* 验证码不能为空 */
	if(code == "验证码"){
		document.getElementById("code").value ="验证码不能为空";
		$("#code").css("color","red");
		return;
	}
	
	var flag = 1;
	
	$.ajax({
		url:"<%=basePath %>userServlet",
		type:"get",
		data:"mark=checkNamePsw&userName="+userName+ "&password="+psw,
		dataType:"json",
		success:function(mes){
			if(mes==false){
				document.getElementById("userName").value ="用户名或密码错误";
				$("#userName").css("color","red");
				document.getElementById("psw").value ="用户名或密码错误";
				$("#psw").css("color","red");
				return;
			}else{
				$("#login").submit();
			}
		}
	});
	

	
	
	
	
});


/*
 *********************************验证码部分************************** 
 */

//验证码倒计时
var iTime = 59;
var Account;
function RemainTime(){
	document.getElementById('getCode').disabled = true;
	var iSecond,sSecond="",sTime="";
	if (iTime >= 0){
		iSecond = parseInt(iTime%60);
		iMinute = parseInt(iTime/60)
		if (iSecond >= 0){
			if(iMinute>0){
				sSecond = iMinute + "分" + iSecond + "秒";
			}else{
				sSecond = iSecond + "秒";
			}
		}
		sTime=sSecond;
		if(iTime==0){
			clearTimeout(Account);
			sTime="获取验证码";
			iTime = 59;
			document.getElementById('getCode').disabled = false;
		}else{
			Account = setTimeout("RemainTime()",1000);
			iTime=iTime-1;
		}
	}else{
		sTime='没有倒计时';
	}
	document.getElementById('getCode').value = sTime;
}


/*获取验证码 */
$(function(){
	$("#getCode").click(function(){
		var userPhoneNumber = $("#userPhoneNumber").val();
		
		/* 检查该号码是否已注册*/
		$.ajax({
			url:"<%=basePath %>userServlet",
			type:"get",
			data:"mark=checkPhoneNumber&userPhoneNumber="+userPhoneNumber,
			dataType:"json",
			success:function(mes){
				if(mes==true){
					document.getElementById("userPhoneNumber").value ="手机号码未注册!";
					$("#userPhoneNumber").css("color","red");
					return;
				}
				
			}
		});
		
		
		$.ajax({
			url:"<%=basePath %>userServlet",
			/* 要求为Object或String类型的参数，
			发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式 */
			/* 这里就是将电话号码以及mark的值传到userServlet */
			data:{"userPhoneNumber":userPhoneNumber,"mark":"getPhoneNumberCode"},
			type:"post",
			dataType:"json",
			success:function(obj){
				//调用倒计时功能
				RemainTime();
				if(obj == true){
					document.getElementById("code").value ="验证码发送成功";
					$("#code").css("color","red");
				}else{
					document.getElementById("code").value ="服务器正忙!";
					$("#code").css("color","red");
				}
			}
		});
	});
	
});


</script>


</body>
</html>